<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px auto;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <div id="box" class="one two three" title="hellow">
        <span>
            我是box
        </span>
    </div>
</body>
<script>
    var box = document.getElementById("box");

    // 元素节点 => 本质是一个对象(对一个或一类事物特征和行为的描述)  => 存在诸多属性和方法

    console.log(box);
    console.dir(box);//打印一个对象或函数的详细属性和方法

    // 元素节点的属性   Element.xxx

    // tagName 获取元素的标签名(只能取值 不能赋值)
    // console.dir(box.tagName);


    //innerHTML    获取和设置 元素的html结构
    //innerText    获取和设置 元素的文本结构
    //textContent  获取和设置 元素的文本结构

    // outerHTML   获取和设置 元素本身及其内部的html结构
    // outerText    获取和设置 元素本身及其内部的文本结构

    // console.log(box.innerHTML);
    // box.innerHTML = "<li>12346</li>";
    // console.log(box.innerHTML);
    // console.log(box.innerText);
    // box.innerText = "123132";
    // console.log(box.textContent);


    console.log(box.outerHTML)
</script>
</html>